<template>
	<!-- 筛选 -->
	<view class="filter" style="position: relative;">
		<view class="filter-title" style="position: relative;display: flex;z-index:99;,">
			<view class="title-item" @tap="handleTap(0)">
				<text>{{value[0].lable}}</text>
				<u-icon name="arrow-up" color="#fff" v-if="!showList[0]"></u-icon>
				<u-icon name="arrow-down" color="#fff" v-else></u-icon>
			</view>
			<view class="title-item" @tap="handleTap(1)">
				<text>{{value[1].lable}}</text>
				<u-icon name="arrow-up" color="#fff" v-if="!showList[1]"></u-icon>
				<u-icon name="arrow-down" color="#fff" v-else></u-icon>
			</view>
		</view>
		<view class="filter-main" v-if="show" @tap="show = false,showList= [true, true]">
			<view class="box" >
				<view  :class="{'main-item':true,'active-color':item.value===value[titleIndex].value?true:false}"  @tap.stop="handleItemTap(item)" v-for="(item,index) in options[titleIndex]" :key="index">{{item.lable}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "dropDownMenu",
		
		data() {
			return {
				show: false,
				showList: [true, true],
				titleIndex: 0,
				value:[{lable:'全部',value:-1},{lable:'全部',value:-1}],
				options: [
					[{
							lable: '全部',
							value: -1
						},
						{
							lable: '在线',
							value: 0
						},
						{
							lable: '离线',
							value: 1
						},
						// {
						// 	lable: '故障',
						// 	value: 2
						// },
					],
					[
					],
				],
			};

		},
		
		 created() {
			 this.$fun.ajax.post('butt/typeList', {
				onlineCode:-1,
			}).then(res => {
				const data1 = []
				res.data.forEach((val) => {
					data1.push({
						lable: val.name,
						value: val.id
					})
				})
				this.options[1] = data1
			})
		},
		methods: {
			handle(){
				console.log(111);
			},
			handleTap(value) {
				if (value === this.titleIndex) {
					this.show = !this.show
				} else {
					this.show = true
				}

				this.showList[value] = !this.show
				this.titleIndex = value
			},
			handleItemTap(item) {
				this.showList[this.titleIndex] = true
				this.show = false
				this.value[this.titleIndex] = item
				console.log(111,item);
				this.$emit('handleFilter',this.value)
			}
		}
	}
</script>

<style lang="scss">
	.filter {
		.filter-title {
			.title-item {
				margin: 10rpx;
				padding: 10rpx;
				display: flex;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;

				text {
					margin-right: 10rpx;
				}
			}
			.active-color {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #0066FF;
			}
		}

		.filter-main {
			background: rgba(0,0,0,0.5);
			position: absolute;
			width: 100vw;
			height: 100%;
			left: 0;
			right: 0;
			top: 100%;
			z-index: 99;
			height: 100vh;
			.box{
				background-color: #fff;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
			}
			.main-item {
				padding: 20rpx 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.active-color {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #0066FF;
			}
		}
	}
</style>